<!DOCTYPE html>
<!doctype html>
<html lang="en">

<head>
  <title>Hyper Drink</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>

  <style>
    body {
      height: 100%;
    }

    .form-signin {
      max-width: 330px;
      padding: 1rem;
    }

    .form-signin .form-floating:focus-within {
      z-index: 2;
    }

    .form-signin input[type="email"] {
      margin-bottom: -1px;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }

    .form-signin input[type="password"] {
      margin-bottom: 10px;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
  </style>

</head>

<body>
  <nav class="navbar sticky-top bg-primary">
    <div class="container-fluid">
      <a class="navbar-brand p-0 me-0 me-lg-2" href="index.html" aria-label="Hyper Drink">
        <h2 class="text-start fw-bold text-light">Hyper Drink</h2>
      </a>
      <div class="input-group mb-1 float-md-end w-25">
        <input type="text" class="form-control text-truncate" placeholder="Type anything here"
          aria-label="Type anything here" aria-describedby="button-addon2">
        <button class="btn btn btn-danger" type="button" id="button-addon2" onclick="myHelloFunction()">Search</button>
      </div>
    </div>
  </nav>

  <h1>Welcome! please login!</h1>

  <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> -->
  <main class="form-signin m-auto" width="400">
    <img src="images/pg.3.jpg" class="rounded mx-auto d-block" alt="...">
    <form>
      <h1 class="h3 mb-3 fw-normal">Please sign in</h1>
      <div class="form-floating">
        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
        <label for="floatingInput">Email address</label>
      </div>
      <div class="form-floating">
        <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
        <label for="floatingPassword">Password</label>
      </div>

      <div class="form-check text-start my-3">
        <input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault">
        <label class="form-check-label" for="flexCheckDefault">
          Remember me
        </label>
      </div>
      <button class="btn btn-primary w-100 py-2" type="submit">Sign in</button>
      <p class="mt-5 mb-3 text-body-secondary">&copy; 2017–2024</p>
    </form>
    <div class="d-grid gap-2 d-flex justify-content-sm-center ms-5">
      <button type="button" class="btn btn-primary btn-lg px-4 gap-3 mt-5">Log out</button>
      <button type="button" class="btn btn-primary btn-lg px-4 gap-3 mt-5">Check for update</button>
      <button type="button" class="btn btn-primary btn-lg px-4 gap-3 mt-5">Change preference</button>
      <button type="button" class="btn btn-primary btn-lg px-4 gap-3 mt-5">About us</button>
  </main>
  <nav class="navbar bg-primary fixed-bottom">
    <div class="container-fluid">
      <button type="button" class="btn btn-light col-3 p-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-droplet"
          viewBox="0 0 16 16">
          <path fill-rule="evenodd"
            d="M7.21.8C7.69.295 8 0 8 0q.164.544.371 1.038c.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8m.413 1.021A31 31 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10a5 5 0 0 0 10 0c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z" />
          <path fill-rule="evenodd"
            d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87z" />
        </svg>
        <a href="index.html">Home</a>
      </button>
      <button type="button" class="btn btn-light col-3 p-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-people-fill"
          viewBox="0 0 16 16">
          <path
            d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5" />
        </svg>
        <a href="main.html">Community</a>
      </button>
      <button type="button" class="btn btn-light col-3 p-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-thermometer"
          viewBox="0 0 16 16">
          <path d="M8 14a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3" />
          <path
            d="M8 0a2.5 2.5 0 0 0-2.5 2.5v7.55a3.5 3.5 0 1 0 5 0V2.5A2.5 2.5 0 0 0 8 0M6.5 2.5a1.5 1.5 0 1 1 3 0v7.987l.167.15a2.5 2.5 0 1 1-3.333 0l.166-.15z" />
        </svg>
        <a href="temperature.html">Temperature</a>
      </button>
      <button type="button" class="btn btn-light col-3 p-1 dropup">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="true">
          More
        </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="Login.html">Login</a></li>
          <li><a class="dropdown-item" href="benefit.html">Benifit</a></li>
          <li><a class="dropdown-item" href="chat.html">Chat</a></li>
          <li>
            <hr class="dropdown-divider">
          </li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </button>
    </div>
  </nav>
  </div>

  <script src="./scripts/script.js"></script>

</body>

</html>